<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑商品</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src = "/layui/layui.js"></script>
</head>
<body>

<!-- 表单 -->
<form class = "layui-form">

    <div class = "layui-form-item">
        <label class = "layui-form-label">父分类</label>
        <div class="layui-input-inline">
            <select name ="parentId" lay-filter="parentId">
            </select>
        </div>
        <label class = "layui-form-label">子分类</label>
        <div class="layui-input-inline">
            <select name ="categoryId">
            </select>
        </div>
    </div>
    <div class = "layui-form-item">
        <label class = "layui-form-label">商品名</label>
        <div class = "layui-input-inline">
            <input type="text" name="name" required placeholder="请输入商品名" class="layui-input">
        </div>
    </div>

    <div class = "layui-form-item">
        <label class = "layui-form-label">描述</label>
        <div class = "layui-input-inline">
            <textarea name = "dscp" placehoder="请输入商品描述" class="layui-textarea" required></textarea>
        </div>
    </div>

    <div class = "layui-form-item">
        <label class = "layui-form-label">售价</label>
        <div class="layui-input-inline">
            <input type = "number" name="price" placeholder="请输入商品出售价格" required class = "layui-input" step="0.01">
        </div>
        <label class = "layui-form-label">标价</label>
        <div class="layui-input-inline">
            <input type = "number" name="markPrice" placeholder="请输入商品标示价格" required class = "layui-input" step="0.01">
        </div>
    </div>

    <div class = "layui-form-item">
        <label class = "layui-form-label">颜色</label>
        <div class="layui-input-inline">
            <input type = "text" name="color" placeholder="请输入商品的颜色" required class = "layui-input">
        </div>
        <label class = "layui-form-label">版本</label>
        <div class="layui-input-inline">
            <input type = "text" name="version" placeholder="请输入商品的版本" required class = "layui-input">
        </div>

    </div>
    <div class = "layui-form-item">
        <label class = "layui-form-label">样式</label>
        <div class="layui-input-inline">
            <input type = "text" name="content" placeholder="请输入商品的版本" required class = "layui-input">
        </div>
    </div>
    <div class = "layui-form-item">
        <label class = "layui-form-label">库存</label>
        <div class="layui-input-inline">
            <input type = "number" name="count" placeholder="请输入商品的库存" required class = "layui-input" step="1">
        </div>
        <label class = "layui-form-label">推荐</label>
        <div class="layui-input-inline">
            <input type = "radio" name="recom" value="0" title="不推荐" checked>
            <input type = "radio" name="recom" value="1" title="推荐">
        </div>
    </div>
    <div class ="layui-form">
        <div class = "layui-form-item">
            <label class = "layui-form-label">图片</label>
            <div class = "layui-input-block">
                <!--图片上传的控件-->
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test2">多图片上传</button>
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                        预览图：
                        <div class="layui-upload-list" id="demo2"></div>
                    </blockquote>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" lay-submit lay-filter="goods-add" class = "layui-btn">提交</button>
        </div>
    </div>
</form>

<script>
    layui.use(['form','upload'],function (){
        var form = layui.form,
            upload = layui.upload,
            $ = layui.$;
        form.render();

        //取出要编辑的分类信息
        var goods = JSON.parse(sessionStorage.getItem('goods-edit'));
        var goods_pic = JSON.parse(sessionStorage.getItem('goods-edit'));

        //商品名
        $('input[name="name"]').val(goods.name);
        //推荐
        $('input[name="recom"][value="'+goods.recom+'"]').attr('checked','checked');
        //描述
        $('textarea[name="dscp"]').val(goods.dscp);
        //售价
        $('input[name="price"]').val(goods.price);
        //标价
        $('input[name="markPrice"]').val(goods.markPrice);
        //颜色
        $('input[name="color"]').val(goods.color);
        //版本
        $('input[name="version"]').val(goods.version);
        //样式
        $('input[name="content"]').val(goods.content);
        //库存
        $('input[name="count"]').val(goods.count);
        //图片
        if(goods_pic.url) {
            $('#demo2').attr('src', '/upload/' + goods_pic.url);
        }
        //状态
        $('input[name="status"][value="'+goods.status+'"]').attr('checked','checked');
        //ID
        $('input[name="id"]').val(goods.id);

        //ajax获取父分类信息
        var getParentCategory = function (){
            $.ajax({
                url:'/api/category',
                data: {parentId: 0},
                type: 'get',
                dataType: 'json',
                success: function (result){
                    var html = '<option value = "">请选择父分类</option>';

                    //遍历生成下拉列表
                    $.each(result.data,function (index,item){
                        html += '<option value = "'+item.id+'">'+item.name+'</option>';
                    });

                    $('select[name="parentId"]').html(html);

                    //渲染
                    form.render();
                },
                error: function (){
                    layer.msg('请求失败');
                }
            });
        };

        //调用
        getParentCategory();

        //动作，父分类选择的动作
        form.on('select(parentId)',function (data){
            var parentId = data.value;

            //下拉列表的二级联动
            if(parentId){
                //查询当前父分类下的子分类
                $.ajax({
                    url:'/api/category',
                    data:{parentId: parentId},
                    type:'get',
                    dataType: 'json',
                    success: function (result){
                        var html = '<option value="">请选择子分类</option>';

                        $.each(result.data,function (index,item){
                            html += '<option value="'+item.id+'">'+item.name+'</option>';
                        });

                        $('select[name="categoryId"]').html(html);

                        form.render();
                    },
                    error: function (){
                        layer.msg('请求失败');
                    }
                });
            }else{
                $('select[name="categoryId"]').html('');
                form.render();
            }
        });

        //多图片上传
        upload.render({
            elem: '#test2',
            url:'/api/upload',
            multiple: true,
            before: function (obj){

            },
            done:function (res){
                //上传完毕
                //读取服务器中的图片
                $('#demo2').append('\
            <img style="width:92px;height:92px;cursor:pointer"\
            src="/upload/'+res.data+'"\
            data-name="'+res.data+'">\
            ');
            }
        });
        //图片的删除操作
        $('#demo2').on('click','img',function (){
            $(this).remove();
        });

        //表单提交
        form.on('submit(goods-add)',function (data) {
            //准备好图片的参数
            var pics = [];
            $('#demo2 img').each(function () {
                var url = $(this).attr('data-name');
                pics.push({url: url});
            });

            data.field.pics = pics;

            //ajax
            $.ajax({
                url: '/api/goods',
                data: JSON.stringify(data.field),
                contentType: 'application/json; charset=utf-8',
                type: 'post',
                dataType: 'json',
                success: function (result) {
                    if (result.code == 0) {
                        //添加成功
                        layer.msg('添加成功');
                        //跳转到列表页面
                        openUrl('/goods/index.html');
                    } else {
                        layer.msg(result.msg);
                    }
                },
                error: function () {
                    layer.msg('请求失败');
                }
            });

            //阻止表单的自动提交
            return false;
        });
    });
</script>
